<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html>
<head>
   	<title>${fns:getConfig('productName')}</title>
    <meta name="decorator" content="blank"/>
	<%@include file="/WEB-INF/view/include/comfile.jsp" %>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
	
	<%@include file="/WEB-INF/view/include/jqGrid.jsp" %>
	<link href="${ctxStatic}/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
	<script src="${ctxStatic}/js/plugins/treeview/bootstrap-treeview.js"></script>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
        	<div class="col-sm-3">
	          	<div class="ibox">
	               <div class="ibox-content mod-bord ">
	                   <div id="treeview" class="test"></div>
	              	</div>
	          	</div>
          	</div>
        	<div class="col-sm-9" style="padding-left: 5px;">
	          	<div class="ibox">
	          	   <div class="ibox-title">
						<div class="col-sm-8 btn-group wrapper-l-xs">
							<a id="addPage" href="${ctx}/sys/permission/form" class="btn btn-default btn-sm"><i class="fa fa-plus"></i> 添    加 </a>
						</div>
						<div class="col-sm-4  wrapper-r-xs8 ">
							<input id="hiddenPid" hidden="true">
							<div class="pull-right btn-group ">
								<a id="updatePage" onclick="javascript:void(0)" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i> 编辑 </a>
								<a id="delPage" onclick="javascript:void(0)" class="btn btn-danger btn-sm"><i class="fa fa-times"></i> 删除 </a>
							</div>
						</div>
                   </div>
	               <div class="ibox-content b-none">
                   		<div class="jqGrid_wrapper">
                      	 	<table id="table_list_1"></table>
                      	 	<div id="pager_list_1"></div>
                      	</div>
	              	</div>
	          	</div>
          	</div>
        </div>
    </div>
    
    <script>
        $(document).ready(function(){
        	$.jgrid.defaults.styleUI="Bootstrap";

        	$("#table_list_1").jqGrid({
				 url:'http://localhost:8888/base-admin/a/sys/permission/list',
				 datatype:"json",
				 mtype : "post",
				 height:400,
				 autowidth:true,
				 shrinkToFit:true,
				 rowNum:10,
				 rowList:[10,20,50],
				 colNames:["id","name","permission","sort","remarks"],
				 colModel:[
						    {name:"id",index:"id",hidden:true,key:true},
						    {name:"name",index:"name",width:140},
						    {name:"permission",index:"permission",width:120},
						    {name:"sort",index:"sort",width:120},
						    {name:"remarks",index:"remarks",width:200}
				  		],
				 pager:"#pager_list_1",
				 viewrecords:true, 
				 loadComplete:function() {//如果数据不存在，提示信息
					    var rowNum = $("#table_list_1").jqGrid('getGridParam','records');
					    if(rowNum < 1){
					    	if($("#norecords").length < 1) {
						        $("#table_list_1").parent().append("<div id='norecords'>没有查询到相关数据！</div>");
					    	}
						    $("#norecords").show();
						    $("#pager_list_1").hide();
					    }else{//如果存在记录，则隐藏提示信息。
					        $("#norecords").hide();
						    $("#pager_list_1").show();
					    }
				  }
			 });
			
        	$("#delPage").click(function() {
			    var gr = jQuery("#table_list_1").jqGrid('getGridParam','selrow');
			    
			    if(gr==null){
			    	layer.msg('未选择操作元素!',{
			    		offset: ['20%', '48%'],
			    		//offset: 't',
			    		anim: 6
			    	});
			    }else{
			    	layer.confirm('确认删除元素:'+gr, {
			    		   title: false, //不显示标题栏
					       offset: ['20%', '48%'],
					       btn: ['确认','取消'] //按钮
				    	}, function(){
				    		$.ajax({
								  url: '${ctx}/sys/permission/del',
								  dataType: 'json',
								  type: 'POST',
								  data:{
									  id:gr
								  },
								  success: function (data) {
									  jQuery("#table_list_1").trigger("reloadGrid");
								  },
								  error: function (jqXHR, text, errorThrown) {
								      console.log(jqXHR + " " + text + " " + errorThrown);
								  }
							});
						  layer.closeAll();
				    	}, function(){
				    		closeBtn: 0;
				    	});
			    }
			    
		    });
			
			$("#updatePage").click(function() {
			    var gr = jQuery("#table_list_1").jqGrid('getGridParam','selrow');
			    var pid = $("#hiddenPid").val();
			    
			    if(gr==null){
			    	layer.msg('未选择操作元素!',{
			    		offset: 't',
			    		anim: 6
			    	});
			    }else{
			    	location="${ctx}/sys/user/form?id="+gr+"&pid="+pid;
			    }
		    });
        	
			
			$(window).bind("resize",function(){
				var width=$(".jqGrid_wrapper").width();
				$("#table_list_1").setGridWidth(width)
			})
			
        	$.ajax({
				  url: '${ctx}/sys/menu/treeBot',
				  dataType: 'json',
				  type: 'POST',
				  success: function (data) {
					  $("#treeview").treeview({
			                color: "rgb(103, 106, 108)",
			                expandIcon: "glyphicon glyphicon-chevron-right",
			                collapseIcon: "glyphicon glyphicon-chevron-down",
			                nodeIcon: "glyphicon glyphicon-bookmark",
			                levels: 2,
			                data: data ,
			                onNodeSelected: function (data, o) {
			                	
			                	$("#hiddenPid").val(o.id);//保存pid
			                	
			                	jQuery("#table_list_1").jqGrid('setGridParam',{  
			                        datatype:'json',  
			                        postData:{'key':o.id},   
			                        page:1  
			                    }).trigger("reloadGrid");
			                }
		              })
				  },
				  error: function (jqXHR, text, errorThrown) {
				      console.log(jqXHR + " " + text + " " + errorThrown);
				  }
			});
			
        	
		});
        
        
    </script>
</body>
</html>
